<template>
    <div>
        <div class="row" style="background: #3e4145">
            <div class="col-xs-12">
                <div class="alert alert-block alert-success">
                    <button type="button" class="close" data-dismiss="alert">
                        <i class="ace-icon fa fa-times"></i>
                    </button>
                    <i class="ace-icon fa fa-check green"></i>
                    图表分析
                    <strong class="green">
                        Hermit
                        <small>(v0.0.1)</small>
                    </strong>
                    学院信息看板
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <!-- 图表二 -->
                        <div id="chart2" style="width: 100%; height:1000%; background: black"></div>
                    </div><!-- /.col -->
                </div><!-- /.row -->

                <div class="row">
                    <div class="col-sm-12">
                        <!-- 图表一 -->
                        <div id="chart1" style="width: 100%; height:1000%"></div>
                    </div>
                </div><!-- /.row -->

                <div class="hr hr32 hr-dotted"></div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {apiDefaultErrorHandler} from "../../api/base";
  import collegeInfoApi from "../../api/work/collegeInfo";

  export default {
    name: 'collegeChart',
    data() {
      return {
        // 图表容器
        myChart1: '',
        myChart2: '',
        myChart3: '',
        myChart4: '',
        collegeInfos: [], // 所有学院信息
        chart1Data: [],
        chart1Data1: [],
        chart1Data2: [],
        chart1Data3: [],
        chart2Data: [],
        chart3Data: [],
        chart4Data: [],
      };
    },
    mounted: function () {
      this.$parent.activeSidebar("welcome-sidebar");
      this.listAll() // 加载数据
    },
    methods: {
      // college 学院name列表
      startChart1() {
        this.myChart1 = echarts.init(document.getElementById('chart1'), 'dark');
        this.myChart1.setOption({

          backgroundColor: '#3e4145',
          // tooltip: {
          //   trigger: 'item',
          //   formatter: '{a} <br/>{b}: {c} ({d}%)'
          // },
          // legend: {
          //   data: this.chart1Data1
          // },
          // series: [
          //   {
          //     name: '专业数量',
          //     type: 'pie',
          //     selectedMode: 'single',
          //     radius: [0, '30%'],
          //     label: {
          //       position: 'inner',
          //       fontSize: 14,
          //     },
          //     labelLine: {
          //       show: false
          //     },
          //     data: this.chart1Data2
          //   },
          //   {
          //     name: '班级数量',
          //     type: 'pie',
          //     radius: ['45%', '60%'],
          //     labelLine: {
          //       length: 30,
          //     },
          //     label: {
          //       formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          //       backgroundColor: '#F6F8FC',
          //       borderColor: '#8C8D8E',
          //       borderWidth: 1,
          //       borderRadius: 4,
          //
          //       rich: {
          //         a: {
          //           color: '#6E7079',
          //           lineHeight: 22,
          //           align: 'center'
          //         },
          //         hr: {
          //           borderColor: '#8C8D8E',
          //           width: '100%',
          //           borderWidth: 1,
          //           height: 0
          //         },
          //         b: {
          //           color: '#4C5058',
          //           fontSize: 14,
          //           fontWeight: 'bold',
          //           lineHeight: 33
          //         },
          //         per: {
          //           color: '#fff',
          //           backgroundColor: '#4C5058',
          //           padding: [3, 4],
          //           borderRadius: 4
          //         }
          //       }
          //     },
          //     data: this.chart1Data3
          //   }
          // ]
          title: {
            text: '学院-专业-班级分析表',
            subtext: '',
            textStyle: {
              fontSize: 18,
              align: 'center'
            },
            subtextStyle: {
              align: 'center'
            },
          },
          series: {
            type: 'sunburst',

            data: this.chart1Data,
            radius: [0, '95%'],
            sort: null,

            emphasis: {
              focus: 'ancestor'
            },

            levels: [{}, {
              r0: '15%',
              r: '35%',
              itemStyle: {
                borderWidth: 2
              },
              label: {
                rotate: 'tangential'
              }
            }, {
              r0: '35%',
              r: '70%',
              label: {
                align: 'right'
              }
            }, {
              r0: '70%',
              r: '72%',
              label: {
                position: 'outside',
                padding: 3,
                silent: false
              },
              itemStyle: {
                borderWidth: 3
              }
            }]
          }
        });
      },
      startChart2() {
        this.myChart2 = echarts.init(document.getElementById('chart2'), 'dark');
        this.myChart2.setOption({
          backgroundColor: '#3e4145',
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: "院系学生人数汇总",
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.chart2Data
            }
          ]
        });
      },

      /** 查询 学院专业数 学院班级数 学院人数 **/
      listAll() {
        let _this = this;
        collegeInfoApi.queryAllCount().then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            _this.collegeInfos = data.list
            // 图表一赋值数据
            this.initChart1Data()
            // 图表二赋值数据
            this.initChart2Data()
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        });
      },

      initChart1Data() {
        if (this.collegeInfos.length > 0) {
          // 遍历学院
          console.log('开始')
          for (let i = 0; i < this.collegeInfos.length; i++) {
            console.log('遍历学院i:<' + i + '>')
            let children1 = []
            console.log('### 此时children1')
            console.log(children1)
            // 遍历专业
            for (let j = 0; j < this.collegeInfos[i].majorInfoEntityList.length; j++) {
              console.log('遍历专业j:<' + j + '>')
              let children2 = []
              console.log('### 此时children2')
              console.log(children2)
              // 遍历班级
              let classNum = 0
              for (let k = 0; k < this.collegeInfos[i].classInfoEntityList.length; k++) {
                console.log('遍历班级k:<' + k + '>')
                if (this.collegeInfos[i].classInfoEntityList[k].majorId === this.collegeInfos[i].majorInfoEntityList[j].id) {
                  console.log('专业下找到班级--k:' + k + '--j:' + j)
                  let children3 = []
                  let studentNum = 0
                  for (let l = 0; l < this.collegeInfos[i].userStudentEntityList.length; l++) {
                    if (this.collegeInfos[i].userStudentEntityList[l].classId === this.collegeInfos[i].classInfoEntityList[k].id) {
                      console.log('班级下找到学生--k:' + k + '--l:' + l + this.collegeInfos[i].userStudentEntityList[l].name)
                      children3.push({
                        name: this.collegeInfos[i].userStudentEntityList[l].name,
                        value: 1
                      })
                      studentNum = studentNum + 1
                    }
                  }
                  children2.push({
                    name: this.collegeInfos[i].classInfoEntityList[k].name,
                    value: studentNum
                  })
                  classNum = classNum + 1
                }
                console.log('### 此时children2')
                console.log(children2)
              }
              if (children2.length > 0) {
                children1.push({
                  name: this.collegeInfos[i].majorInfoEntityList[j].name,
                  value: classNum,
                  children: children2
                })
              } else {
                children1.push({
                  name: this.collegeInfos[i].majorInfoEntityList[j].name,
                  value: classNum
                })
              }
            }
            if (children1.length > 0) {
              this.chart1Data.push({
                name: this.collegeInfos[i].name,
                value: this.collegeInfos[i].majorInfoEntityList.length,
                children: children1
              })
            } else {
              this.chart1Data.push({
                name: this.collegeInfos[i].name,
                value: this.collegeInfos[i].majorInfoEntityList.length
              })
            }
            if (i === this.collegeInfos.length - 1) {
              // 绘制图表一
              console.log('赋值表一数据一')
              console.log(this.chart1Data)
              this.startChart1()
            }

          }


        }
      },

      /** 查询 学院专业数 学院班级数 学院人数 **/
      initChart2Data() {
        if (this.collegeInfos.length > 0) {
          // 遍历学院
          for (let i = 0; i < this.collegeInfos.length; i++) {
            // 图表二赋值
            this.chart2Data.push({
              name: this.collegeInfos[i].name,
              value: this.collegeInfos[i].userStudentEntityList.length
            });
            if (i === this.collegeInfos.length - 1) {
              // 绘制图表二
              console.log('赋值表二')
              console.log(this.chart2Data)
              this.startChart2()
            }

          }
        }
      },
    }
  }
</script>
